<template>
  <div class="header-config-page">
    <h2>表头显示调整</h2>
    <!-- 核心组件：DraggableEditableTable -->
    <DraggableEditableTable
        ref="configTable"
        :columns="columns"
        :initialData="tableData"
        :showDragHandle="true"
        :showClear="false"
        :selectable="true"
        :show-actions="false"
        @update:data="onDataUpdate"
    >
      <!-- 自定义标题（可选） -->
      <template #title>
        <span>表头显示调整</span>
      </template>
      <!-- 自定义操作列 -->
      <template #footer="{ record }">
        <a-button type="primary">保存</a-button>
      </template>
    </DraggableEditableTable>

    <!-- 新增按钮（独立实现，也可集成到组件操作列） -->
    <a-button
        type="primary"
        icon="plus"
        style="margin-top: 16px"
        @click="addNewItem"
    >
      新增
    </a-button>

    <!-- 数据预览（调试用，可删除） -->
    <div class="preview" v-if="tableData.length">
      <h3>当前表头配置</h3>
      <pre>{{ tableData }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { DeleteOutlined } from '@ant-design/icons-vue';
import DraggableEditableTable from '@/components/YGCrm/DraggableEditableTable.vue'; // 假设组件文件路径
import { FormTypes } from "@/utils/JEditableTableUtil.js";

// 表格列配置（移除 customDisplay）
const columns = ref([
  {
    title: '可显示',
    dataIndex: 'visible',
    type: 'checkbox',
    width: 80,
    align: 'center'
  },
  {
    title: '可排序',
    dataIndex: 'sortable',
    type: 'checkbox',
    width: 80,
    align: 'center'
  },
  {
    title: '显示名称',
    dataIndex: 'displayName',
    type: FormTypes.input, // 点击可编辑
    width: 120
  },
  {
    title: '显示宽度',
    dataIndex: 'width',
    type: 'input', // 点击可编辑
    validateRules:[
      {pattern: 'n,%', message: '请输入数字或百分比'}
    ],
    width: 100,
    align: 'right'
  },
  {
    title: '字段名称',
    dataIndex: 'fieldName',
    type: FormTypes.sel_search,
    width: 220
  }
]);

// 初始表头数据（与设计图一致）
const tableData = ref([
  {
    id: 1,
    visible: true,
    sortable: true,
    displayName: '统计分组',
    width: '',
    fieldName: 'group_name'
  },
  {
    id: 2,
    visible: true,
    sortable: false,
    displayName: '收入',
    width: '',
    fieldName: 'income'
  },
  {
    id: 3,
    visible: true,
    sortable: false,
    displayName: '支出',
    width: '',
    fieldName: 'expenditure'
  },
  {
    id: 4,
    visible: true,
    sortable: false,
    displayName: '利润',
    width: '',
    fieldName: 'profit'
  }
]);

const configTable = ref(null);
// 新增表头项
const addNewItem = () => {
  configTable.value.addNewRow();
};

// 删除行
const handleDelete = (id) => {
  tableData.value = tableData.value.filter(item => item.id !== id);
  onDataUpdate(tableData.value);
};

// 数据更新回调
const onDataUpdate = (newData) => {
  console.log('表头配置已更新：', newData);
  // 1. 同步更新序号（拖拽后重新排序）
  // newData.forEach((item, idx) => {
  //   item.key = idx + 1;
  // });
  // 2. 可在此处调用接口保存配置到后端
  console.error(JSON.stringify(
      newData
  ))
};
</script>

<style scoped>
.header-config-page {
  max-width: 800px;
  margin: 32px auto;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

h2 {
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 600;
}

.preview {
  margin-top: 24px;
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #eee;
  border-radius: 4px;
}

.preview h3 {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}

.preview pre {
  margin: 0;
  font-size: 12px;
  white-space: pre-wrap;
}
</style>